﻿import React from 'react';
import ReactDOM from 'react-dom';
import mirror, {actions, connect} from 'mirrorx';
import { createForm } from 'rc-form';
import { FormattedMessage } from 'react-intl';
import { List, WhiteSpace,Flex,Badge,Picker } from 'antd-mobile';
const ListItem = List.Item;
import enUs from 'antd-mobile/lib/date-picker/locale/en_US';

class App extends React.Component { 
	constructor(props) {
		super(props);

		const Lang = window.LangMessage ||{};
		this.langList = [{ value: "zh_CN", label: window.LangMessage.lang_zh_cn || "中文简体" }, 
		{ value: "zh_TW", label: window.LangMessage.lang_zh_tw || "中文繁体" },
		{ value: "en_US", label: window.LangMessage.lang_en_us || "English" },
		{ value: "ja_JP", label: window.LangMessage.lang_ja_jp || "日文" }];
		this.currentLang = T.getAttrObject(this.langList, "value", T.cookie.get("lang"))[0] || {};

		this.state = {
			userInfo:{},
			langvalue: [this.currentLang.value]
		}
	}
	
changeLang = (lang) => {	
	if (lang) {		
		T.cookie.set("lang", lang);
	}
	this.setState({
		langvalue:lang
	})
	setTimeout(function () {
	    location.reload();
	}, 0);
}

	

	componentDidMount(){
		this.requestUserInfo();
	}

	requestUserInfo=()=>{	
		T.fetch({				
			url:"/customer/detail.json"
		}).then((res)=>{
			if(res.success){
				console.log(res);
				let data = res.value ||{};
				this.setState({userInfo:data});				
			}
		});	

	}

	toBankClick = ()=>{
		const Lang = window.LangMessage ||{};
		if(!this.state.userInfo.name){
			T.showInfo(Lang.please_cert_first || "请先进行实名认证")
			alert(Lang.please_cert_first ||'请先进行实名认证', '', [
				{ text: Lang.cancle_text || '取消'},
				{ text: Lang.to_cert || '去认证', onPress: () => {
					location.href= "info-certificate";
				} },
			  ])
			return;
		}

		actions.routing.push("bankcard-list")
	}

	logoutAction = ()=>{
		T.fetch({				
			url:"/user/signOut.json"
		}).then((res)=>{
			if(res.success){
				actions.routing.push("login")
			}
		});	
	}
	
	render() {
		const Lang = window.LangMessage ||{};
		const userInfo = this.state.userInfo;	
		const { getFieldProps } = this.props.form;
		return (<div className="user-info">
			<Flex style={{padding:20}} className="">
				<Flex.Item className="tac">
					<img src="/assets/images/face.png" className="user-img" />
				</Flex.Item>
				<Flex.Item className="tac">					
					{!userInfo.personId &&
						<Badge text={Lang.not_cert || ' 未实名 '} className="f32"></Badge>
					}
					{userInfo.personId && userInfo.name &&
						<Badge text={Lang.yes_cert || '  已实名  '} className="f32" style={{ backgroundColor: '#87d068' }}>{userInfo.name}</Badge>
					}					
				</Flex.Item>
			</Flex>

			<List className="info-main">
				<ListItem arrow="horizontal" className="" onClick={()=>actions.routing.push("info-base")}><FormattedMessage id='info_base' defaultMessage='个人基本信息'/></ListItem>
				<ListItem arrow="horizontal" className="" onClick={()=>actions.routing.push("password-manage")}><FormattedMessage id='pwd_manage' defaultMessage='密码管理'/></ListItem>
				<ListItem arrow="horizontal" className="" onClick={this.toBankClick}><FormattedMessage id='bank_account_manage' defaultMessage='银行账号管理'/></ListItem>
				<Picker data={this.langList} cols={1}  value={this.state.langvalue} locale={enUs}  
				{...getFieldProps("langpicker",{
							initialValue:[this.currentLang.value],							
							onChange:(value)=>this.changeLang(value)
						})}
				>	
				<ListItem arrow="horizontal"><FormattedMessage id='language' defaultMessage='语言' /></ListItem>				
				</Picker>
				<ListItem className="logout" onClick={this.logoutAction}><FormattedMessage id='btn_logout' defaultMessage='退出'/></ListItem>
			</List>
	  	</div>)
	}
}


const AppForm = createForm()(App);

export default AppForm;